<template>
	<view >
		<view class="fixed-bg-blue">
			<cu-custom bgColor="bg-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">年终奖计算</block>
			</cu-custom>
			<view class="padding text-center">
				<view class="radius-lg shadow shadow-lg bg-white padding-top-sm relative">
					<view class="cu-form-group solid-bottom">
						<view class="text-xxxl-important title">￥</view>
						<input placeholder="请输入年终奖" name="input" :value="yearEndBoundAmount" type="digit"
							class="text-xxxl-important text-left text-bold" @blur="changeAmount"
							@confirm="changeAmount"></input>
					</view>
					<view class="flex align-center justify-between padding-tb-sm padding-lr-lg">
						<text>全年一次性奖金</text>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="cu-list menu sm-border card-menu shadow shadow-lg bg-white">
			<view class="cu-item" @click="toPage('socialDetail')">
				<view class="content">
					<text class="cuIcon-moneybagfill text-olive"></text>
					<text class="text-grey">月平均工资</text>
				</view>
				<view class="action margin-right">
					<text class="text-bold text-price text-lg">{{ preMonthAmount || '0' }}</text>
				</view>
			</view>
			<view class="cu-item" @tap="showTaxRule">
				<view class="content">
					<text class="cuIcon-geshui_geshuiguanli text-pink"></text>
					<text class="text-grey">税率</text>
				</view>
				<view class="action">
					<text class="text-bold text-lg">{{ aloneYearEndBound.curTaxRate ? aloneYearEndBound.curTaxRate.rate : '0' }}%</text>
				</view>
				<view class="text-gray">
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>

		<view class="cu-list card-menu grid col-3 radius-lg shadow shadow-lg bg-white">
			<view class="cu-item">
				<view class="text-sm text-gray">应纳所得税额</view>
				<view class="text-bold text-price text-xl margin-top-xs">{{ aloneYearEndBound.basicAmount || '0' }}</view>
			</view>
			<view class="cu-item">
				<view class="text-sm text-gray">到手金额</view>
				<view class="text-bold text-price text-xl margin-top-xs">{{ aloneYearEndBound.taxAfterAmount || '0' }}</view>
			</view>
			<view class="cu-item">
				<view class="text-sm text-gray">应纳税额</view>
				<view class="text-bold text-price text-xl margin-top-xs">{{ aloneYearEndBound.taxAmount || '0' }}</view>
			</view>
		</view>
		
		<view class="margin">
			<view class="text-gray text-sm"><text class="text-red margin-right-xs">*</text>应纳税额 = 全年一次性奖金 / 12 * 税率 - 速算扣除数</view>
			<view class="margin-top-xs text-gray text-sm" v-if="aloneYearEndBound.taxAfterAmount"><text class="text-red margin-right-xs">*</text>
			{{ aloneYearEndBound.taxAmount }} = {{ yearEndBoundAmount }} / 12 * {{ aloneYearEndBound.curTaxRate.rate }}% - {{aloneYearEndBound.curTaxRate.quickCalcAmount}}</view>
		</view>
		
		
		
		<view class="cu-modal" :class="modalVisible?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">个税规则表</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding">
					<view class="grid margin-bottom text-center col-3">
						<view class="padding-sm bg-blue">应纳所得税额</view>
						<view class="padding-sm bg-blue">税率</view>
						<view class="padding-sm bg-blue">速算扣除数</view>
		
						<block v-for="(item, index) in taxRateDetailList">
							<view class="padding-sm" :class="curTaxRateId == item.id ? 'text-blue' : ''">
								{{ item.minAmount }}~{{ item.maxAmount || '∞' }}
							</view>
							<view class="padding-sm" :class="curTaxRateId == item.id ? 'text-blue' : ''">
								{{ item.rate }}%
							</view>
							<view class="padding-sm" :class="curTaxRateId == item.id ? 'text-blue' : ''">
								{{ item.quickCalcAmount }}
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import {
		appMixin
	} from '@/store/app-mixin'
	import {
		accDiv
	} from '@/utils/common'
	export default {
		data() {
			return {
				preMonthAmount: 0,
				modalVisible: '',
				taxRateDetailList: [],
				curTaxRateId: null
			}
		},
		mixins: [appMixin],
		methods: {
			changeAmount(e) {
				this.preMonthAmount = accDiv(e.detail.value, 12).toFixed(2)
				this.$store.commit('SET_YEAR_END_BOUND_AMOUNT', e.detail.value);
				this.$store.dispatch('calc').then(() => {
					this.curTaxRateId = this.aloneYearEndBound.curTaxRate.id
				})
			},
			showTaxRule() {
				this.$store.dispatch('getYearEndBoundTaxRate').then((res)=> {
					this.taxRateDetailList = res.taxRateDetailList
				})
				this.modalVisible = 'show'
			},
			hideModal() {
				this.modalVisible = ''
			}
		}
	}
</script>

<style>
</style>